<template>
    <div class="head_top">
      <div class="select">
        <div class="block">
          <span class="demonstration">选择日程时间：</span>
          <el-date-picker
            v-model="value1"
            type="week"
            format="yyyy 第 WW 周"
            placeholder="选择日月"
            size="mini"
            style="width: 150px"
          >
          </el-date-picker>
          &nbsp;
          <el-date-picker
            v-model="value1"
            type="week"
            format="yyyy 第 WW 周"
            placeholder="选择日月"
            size="mini"
            style="width: 150px"
          >
          </el-date-picker>
          &nbsp;
          <span>选择员工：</span>
          <el-input
            placeholder="请输入内容"
            v-model="input4"
            style="width: 120px"
            size="mini"
          >
            <i slot="suffix" class="el-input__icon el-icon-search" @click="dialogTableVisible = true"></i>
          </el-input>
          <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
              
          </el-dialog>
          &nbsp;
          <span>请输入内容：</span>
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 120px"
            size="mini"
          ></el-input>
          &nbsp;
          <span>优先级：</span>
          <el-select
            v-model="value"
            placeholder="全部"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.value
              }}</span>
            </el-option>
          </el-select>
          &nbsp;
          <el-button
            type="primary"
            style="width: 50px; padding: 7px 5px"
            size="mini"
            >查询</el-button
          >
          <el-button style="width: 50px" size="mini">重置</el-button>
        </div>
        <div class="arrange">
          <el-button type="primary" icon="el-icon-plus" size="mini"
            >添加日程安排</el-button
          >
        </div>
        <div>
          <el-table :data="tableData" stripe style="width: 100%; font-size: 10px">
            <el-table-column label="ID" prop="id" width="40px"></el-table-column>
            <el-table-column
              v-model="on"
              label="优先级"
              prop="priority"
              width="110px"
              clor
            >
              <template slot-scope="scope">
                <p
                  class="cm-status"
                  :style="{
                    color: caseStatusColorFilter(scope.row.id),
                  }"
                >
                  {{ statusText(scope.row.id) }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="日程时间范围" prop="schedule" width="260px">
            </el-table-column>
            <el-table-column prop="date" label="日程安排内容" width="180">
            </el-table-column>
            <el-table-column prop="name" label="提醒时间" width="180">
            </el-table-column>
            <el-table-column prop="address" label="创建人"> </el-table-column>
            <el-table-column label="操作" header-align="right" align="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        value: "",
        caseStatusMap: [
          {
            code: 1,
            name: "紧急",
            bgc: "#E54032",
          },
          {
            code: 2,
            name: "次要",
            bgc: "#2D7CEE",
          },
        ],
        tableData: [
          {
            id: 1,
            schedule: "2022-12-30 09:00至2023-01-1300:00",
            date: "拜访重要客户",
            name: "2022-12-30 08:55",
            address: "张小华",
          },
          {
            id: 2,
            schedule: "2022-12-30 09:00至2023-01-1300:00",
            date: "拜访重要客户",
            name: "2022-12-30 08:55",
            address: "张小华",
          },
          {
            id: 2,
            schedule: "2022-12-30 09:00至2023-01-1300:00",
            date: "拜访重要客户",
            name: "2022-12-30 08:55",
            address: "张小华",
          },
          {
            id: 2,
            schedule: "2022-12-30 09:00至2023-01-1300:00",
            date: "拜访重要客户",
            name: "2022-12-30 08:55",
            address: "张小华",
          },
        ],
        gridData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
          dialogTableVisible: false,
      };
    },
    methods: {
      // 颜色过滤
      caseStatusColorFilter(val) {
        let col = null;
        this.caseStatusMap.forEach((arg) => {
          if (arg.code === val) {
            col = arg.bgc;
          }
        });
        return col;
      },
  
      statusText(status) {
        switch (status) {
          case 1:
            return "紧急";
          case 2:
            return "次要";
        }
      },
    },
  };
  </script>
  
  <style>
  .head_top {
    background: #fdf9f9;
    padding: 20px;
  }
  .select {
    font-size: 12px;
  }
  .arrange {
    margin-top: 10px;
  }
  </style>